<template>
    <div>
        <div class="n-layout-page-header">
            <n-card :bordered="false" title="实验室借用申请">
            </n-card>
        </div>
        <n-card :bordered="false" class="mt-4 proCard">
            <n-grid cols="1 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
                <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
                    <n-form :label-width="90" :model="labBorrowRef" :rules="rules" label-placement="left" ref="formRef"
                        class="py-8">
                        <n-form-item label="课程" path="">
                            <n-select placeholder="请选择课程" :options="courseList" v-model:value="labBorrowRef.courseId" />
                        </n-form-item>
                        <n-form-item label="周几" path="">
                            <n-select placeholder="请选择工作日" :options="weekOfDayList" v-model:value="labBorrowRef.day" />
                        </n-form-item>
                        <n-form-item label="起始周" path="">
                            <n-select placeholder="请选择起始周" :options="weekList" v-model:value="labBorrowRef.startWeek" />
                        </n-form-item>
                        <n-form-item label="结束周" path="">
                            <n-select placeholder="请选择结束周" :options="weekList" v-model:value="labBorrowRef.endWeek" />
                        </n-form-item>
                        <n-form-item label="申请节次" path="">
                            <n-select placeholder="申请节次" :options="sectionList" v-model:value="labBorrowRef.section" />
                        </n-form-item>
                        <n-form-item label="申请实验室" path="">
                            <n-select placeholder="申请实验室" :options="labNameList" v-model:value="labBorrowRef.labType" />
                        </n-form-item>

                        <n-form-item label="班级名称" path="remark">
                            <n-input v-model:value="labBorrowRef.className"  placeholder="名称" />
                        </n-form-item>

                      

                        <div style="margin-left: 170px">
                            <n-space>
                                <n-button type="primary" @click="formSubmit">提交申请</n-button>
                            </n-space>
                        </div>
                    </n-form>
                </n-grid-item>
            </n-grid>
        </n-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';

import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

import { useMessage } from 'naive-ui';
import { getAllLabList, createNewLabBorrow } from '@/api/student/student';
import { getAllCourseApi,createNewLabApplyApi } from '@/api/teacher/teacher';

const weekOfDayList = [
    {
        label: '周一',
        value: '一',
    },
    {
        label: '周二',
        value: '二',
    },
    {
        label: '周三',
        value: '三',
    },
    {
        label: '周四',
        value: '四',
    },
    {
        label: '周五',
        value: '五',
    },

]

//动态生成1-20数据列表
function createWeekList() {
    let list = new Array();
    for (let i = 1; i <= 20; i++) {
        list.push({
            label: i + '',
            value: i + '',
        },)
    }
    return list
}
const weekList = createWeekList()

onMounted(() => {

    createCourseList()
})


const sectionList = [
    {
        label: '1-2',
        value: '1-2',
    },
    {
        label: '3-5',
        value: '3-5',
    },
    {
        label: '6-7',
        value: '6-7',
    },
    {
        label: '8-9',
        value: '8-9',
    },
    {
        label: '10-12',
        value: '10-12',
    },
    {
        label: '13-15',
        value: '13-15',
    },

];


var courseInfoList

//获取实xx(课程)列表  --labNAme要保存
async function createCourseList() {

    courseInfoList = await getAllCourseApi()
    console.log("getAllCourseApi", courseInfoList)

    let list = new Array();
    for (let course of courseInfoList) {
        list.push({
            label: course.courseName,
            value: course.id,
        })
    }
    courseList.value = list
    console.log("list", list)
    return list
}


function getCourseName(courseId) {
    for (let course of courseInfoList) {
        if (course.id == courseId)
            return course.courseName
    }
}

function getCourseCount(courseId) {
    for (let course of courseInfoList) {
        if (course.id == courseId)
            return course.count
    }
}

const labNameList = [
    {
        label: '软件',
        value: '软件',
    },
    {
        label: '硬件',
        value: '硬件',
    },
    {
        label: '网络',
        value: '网络',
    },
]

const courseList = ref()

const rules = {};

const formRef: any = ref(null);
const message = useMessage();


let labBorrowRef = reactive({

    className:'',

    day: '',
    startWeek: '',
    endWeek: '',

    section: '',



    labId: '',
   
    labType:'',
    courseId: ''
});


function formSubmit() {

    // createlabNameList()

    // let labName = getLabName(labBorrowRef.labId)
    let cousreName = getCourseName(labBorrowRef.courseId)
    let count = getCourseCount(labBorrowRef.courseId)

    formRef.value.validate((errors) => {
        if (!errors) {
            let result = labBorrowRef
            // console.log("couseName", couseName, "res", result,"count",count)
            const res = createNewLabApplyApi({ ...result, "courseName": cousreName ,"count":count})
            let toPath = "/teacher/labApplyList"

            router.replace(toPath);

            // message.info('没有实现表单验证');
        } else {
            message.error('验证失败，请填写完整信息');
        }
    });
}


</script>